<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		html {
			height: 100%
		}

		body {
			height: 100%;
			margin: 0px;
			padding: 0px
		}

		#container {
			height: 100%
		}
	</style>
	<script src="http://api.map.baidu.com/api?v=2.0&ak=90c6dd5e082df563aa69e1d81536c75c"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
	var map = new BMap.Map("container");          // 创建地图实例
	var point = new BMap.Point(116.404, 39.915);  // 创建点坐标
	map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
	map.addControl(new BMap.NavigationControl());
	map.addControl(new BMap.ScaleControl());
	map.addControl(new BMap.OverviewMapControl());
	map.addControl(new BMap.MapTypeControl());


	// 编写自定义函数，创建标注
	function addMarker(point, index) {  // 创建图标对象
		var myIcon = new BMap.Icon("markers.png", new BMap.Size(23, 25), {
			// 指定定位位置。
			// 当标注显示在地图上时，其所指向的地理位置距离图标左上
			// 角各偏移10像素和25像素。您可以看到在本例中该位置即是
			// 图标中央下端的尖角位置。
			offset: new BMap.Size(10, 25),
			// 设置图片偏移。
			// 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
			// 需要指定大图的偏移位置，此做法与css sprites技术类似。
			imageOffset: new BMap.Size(0, 0 - index * 25)   // 设置图片偏移
		});
		// 创建标注对象并添加到地图
		var marker = new BMap.Marker(point, {icon: myIcon});
		map.addOverlay(marker);

		marker.addEventListener('click', function () {
			alert(1);
		})

		marker.enableDragging();
		marker.addEventListener("dragend", function (e) {
			console.log("当前位置：" + e.point.lng + ", " + e.point.lat);
		})


	}
	// 随机向地图添加10个标注
	var bounds = map.getBounds();
	var lngSpan = bounds.getNorthEast().lng - bounds.getSouthWest().lng;
	var latSpan = bounds.getNorthEast().lat - bounds.getSouthWest().lat;
	for (var i = 0; i < 10; i++) {
		var point = new BMap.Point(bounds.getSouthWest().lng + lngSpan * (Math.random() * 0.7 + 0.15),
				bounds.getSouthWest().lat + latSpan * (Math.random() * 0.7 + 0.15));
		addMarker(point, i);
	}


	// 打开infowindow
	var opts = {
		width: 250,     // 信息窗口宽度
		height: 100,     // 信息窗口高度
		title: "Hello"  // 信息窗口标题
	}
	var infoWindow = new BMap.InfoWindow("World", opts);  // 创建信息窗口对象
	map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口

	// 折线
	var polyline = new BMap.Polyline(
			[
				new BMap.Point(116.399, 39.910),
				new BMap.Point(116.405, 39.920)
			],
			{
				strokeColor: "blue",
				strokeWeight: 6,
				strokeOpacity: 0.5
			}
	);
	map.addOverlay(polyline);
</script>
</body>
</html>